import { FC, useState } from "react"
import { LeftOutlined } from "@ant-design/icons"
import { Tabs, Radio, Modal } from "antd"
const { TabPane } = Tabs
import styles from "./ReportView.less"
import TestReportCom from "@/components/TestReportCom"
import { ColumnsType } from "antd/es/table"
import CheckTable from "@/components/CheckTable"

export interface testReportInter {
  key?: string,
  dates: string
  projectName: string,
  type: string | "1",
  recordStatus: string
  testRequisitionNo: string,
  errorItemNum: string | "0",
  hospDistrictName: string
}

export interface infoListType {
  label: string, value: string, key: string
}

const reportView: FC = () => {

  const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
  const [reportState, setReportState] = useState<number>(0)

  let reportList: Array<testReportInter> = [
    {
      key: "1",
      dates: "20210512",
      projectName: "血液化验单",
      type: "1",
      recordStatus: "未出报告",
      testRequisitionNo: "1",
      errorItemNum: "0",
      hospDistrictName: "天河医院"
    },
    {
      key: "2",
      dates: "20210512",
      projectName: "肝功能化验单",
      type: "2",
      recordStatus: "报告异常",
      testRequisitionNo: "2",
      errorItemNum: "0",
      hospDistrictName: "黄埔医院"
    }

  ]


  let infoList1: Array<infoListType> = [
    { label: "申请单号", value: "8989898389", key: "testRequisitionNo" },
    { label: "姓名", value: "王丽", key: "patName" },
    { label: "性别", value: "女", key: "sexName" },
    { label: "ID", value: "56413155", key: "patResourceCode" },
    { label: "年龄", value: "30", key: "dateBirth" },
  ]

  let infoList2: Array<infoListType> = [
    { label: "申请时间", value: "2020-10-31", key: "testDate" },
    { label: "标本", value: "中段尿", key: "testSampleNo" },
    { label: "科室", value: "妇科", key: "testDeptName" },
    { label: "申请医生", value: "陈少峰", key: "applyDocName" },
    { label: "报告日期", value: "2020-10-31", key: "reportDate" },
  ]

  const columns: ColumnsType<any> = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
      align: "center",
      width: "57"
    },
    {
      title: "项目",
      dataIndex: "datetime",
      key: "datetime",
      align: "center",
      width: "auto",
    },
    {
      title: "结果",
      dataIndex: "deptName",
      key: "deptName",
      align: "center",
      width: "auto",
    },
    {
      title: "单位",
      dataIndex: "description",
      key: "description",
      align: "center",
      width: "auto",
    },
    {
      title: "参考值",
      dataIndex: "descpCode",
      key: "descpCode",
      align: "center",
      width: "auto",
    },
    {
      title: "操作",
      dataIndex: "type",
      key: "type",
      align: "center",
      width: "auto",
    }
  ]

  const data = [
    {
      id: "1",
      datetime: "20210428",
      deptName: "外科",
      description: "主要诊断信息",
      descpCode: "c5d45",
      type: 1,
    },
    {
      id: "2",
      datetime: "20210428",
      deptName: "内科科",
      description: "主要诊断信息",
      descpCode: "c5d45",
      type: 1,
    },
    {
      id: "3",
      datetime: "20210428",
      deptName: "儿科",
      description: "主要诊断信息",
      descpCode: "c5d45",
      type: 1
    },
  ]

  let currentReport: testReportInter = reportList[0]

  const showReport = (state: number) => {
    setReportState(state)
    setIsModalVisible(true)
  }

  return (
    <div className={styles.reportViewBox}>
      <div className={styles.backBtn}> <LeftOutlined />返回</div>
      <Tabs className={`${styles.reportViewTabs} ${styles.a}`} defaultActiveKey="1">
        <TabPane className={styles.reportViewTabsItem} tab="检验(1)" key="0">
          <Radio.Group className={styles.radioGroup} value={1}>
            <Radio value={1} className={styles.radioGroupItem}>血液常规（5）</Radio>
          </Radio.Group>
          <div className={styles.reportInfo}>
            <div className={styles.infoBox}>
              <div className={`${styles.infoRow} flex m-b-10`}>
                <div className={styles.item}>申请单号：<span className={styles.value}>fsdfsd</span></div>
                <div className={styles.item}>报告单号：<span className={styles.value}>sdfsdf</span></div>
                <div className={styles.item}>检验类型：<span className={styles.value}>fdssdf</span></div>
                <div className={styles.item}>检验日期：<span className={styles.value}>sdfsdf</span></div>
              </div>
              <div className={`${styles.infoRow} flex m-b-10`}>
                <div className={styles.item}>送检科室：<span className={styles.value}>sfddsf</span></div>
                <div className={styles.item}>送检医生：<span className={styles.value}>sdfsdf</span></div>
                <div className={styles.item}>检验科室：<span className={styles.value}>sdfsdf</span></div>
                <div className={styles.item}>检验医生：<span className={styles.value}>sfdsdf</span></div>
              </div>
            </div>
            <div className={`${styles.checkBtn} flex-c cursor`} onClick={() => { showReport(0) }}>查看报告</div>
          </div>
          <div className={styles.reportSession}>
            <div className={styles.item}>
              <div className={styles.label}>临床症状：</div>
              <div className={styles.value}>sfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>诊断：</div>
              <div className={styles.value}>sdfdsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检验目的：</div>
              <div className={styles.value}>sfddsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检验样本号：</div>
              <div className={styles.value}>fsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本名称：</div>
              <div className={styles.value}>sfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本描述：</div>
              <div className={styles.value}>sdfdsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本采样日期：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本接收日期：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
          </div>
          <div className={styles.reportSession}>
            <div className={styles.item}>
              <div className={styles.label}>申请日期：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>申请科室：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>申请医生工号：</div>
              <div className={styles.value}>sfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>申请医生姓名：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
          </div>
          <div className={styles.reportSession}>
            <div className={styles.item}>
              <div className={styles.label}>执行科室：</div>
              <div className={styles.value}>sdfsd</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label} />
              <div className={styles.value} />
            </div>
            <div className={styles.item}>
              <div>
                <div className="flex m-b-10">
                  <div className={styles.label}>执行医生工号：</div>
                  <div className={styles.value}>sdfdsf</div>
                </div>

              </div>
            </div>
            <div className={styles.item}>
              <div>
                <div className="flex m-b-10">
                  <div className={styles.label}>执行医生姓名：</div>
                  <div className={styles.value}>sfdsdf</div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.reportSession}>
            <div className={styles.item}>
              <div className={styles.label}>检验项目类型：</div>
              <div className={styles.value}>sfdsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.value} />
              <div className={styles.value} />
            </div>
            <div className={styles.item}>
              <div>
                <div className="flex m-b-10">
                  <div className={styles.label}>检验项目1：</div>
                  <div className={styles.value}>sdfsdf</div>
                </div>
                <div className="flex m-b-10">
                  <div className={styles.label}>收费标志：</div>
                  <div className={styles.value}>sdfsdf</div>
                </div>
                <div className="flex">
                  <div className={styles.label}>作废标志：</div>
                  <div className={styles.value}>sfdsdf</div>
                </div>
              </div>
            </div>
            <div className={styles.item}>
              <div>
                <div className="flex m-b-10">
                  <div className={styles.label}>检验项目2：</div>
                  <div className={styles.value} />
                </div>
                <div className="flex">
                  <div className={styles.label}>注意事项：</div>
                  <div className={styles.value}>sdfsdf</div>
                </div>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane className={styles.reportViewTabsItem} tab="检查(1)" key="1">
          <Radio.Group className={styles.radioGroup} value={1}>
            <Radio value={1} className={styles.radioGroupItem}>肺部扫描筛选</Radio>
          </Radio.Group>
          <div className={styles.reportInfo}>
            <div className={styles.infoBox}>
              <div className={`${styles.infoRow} flex m-b-10`}>
                <div className={styles.item}>申请单号：<span className={styles.value}>fsdfsd</span></div>
                <div className={styles.item}>住院号：<span className={styles.value}>sdfsdf</span></div>
                <div className={styles.item}>门诊号：<span className={styles.value}>fdssdf</span></div>
                <div className={styles.item}>申请日期：<span className={styles.value}>sdfsdf</span></div>
              </div>
              <div className={`${styles.infoRow} flex m-b-10`}>
                <div className={styles.item}>报告单号：<span className={styles.value}>sfddsf</span></div>
                <div className={styles.item}>检查医生：<span className={styles.value}>sdfsdf</span></div>
                <div className={styles.item}>检查科室：<span className={styles.value}>sdfsdf</span></div>
                <div className={styles.item}>检查日期：<span className={styles.value}>sfdsdf</span></div>
              </div>
            </div>
            <div className={`${styles.checkBtn} flex-c cursor`} onClick={() => { showReport(1) }}>查看报告</div>
          </div>
          <div className={styles.reportSession}>
            <div className={styles.item}>
              <div className={styles.label}>诊断代码：</div>
              <div className={styles.value}>sfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>诊断日期：</div>
              <div className={styles.value}>sdfdsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>患者主诉：</div>
              <div className={styles.value}>sfddsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>症状描述：</div>
              <div className={styles.value}>fsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检查样本号：</div>
              <div className={styles.value}>sfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本状态：</div>
              <div className={styles.value}>sdfdsf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本采样日期：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>样本接收日期：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
          </div>
          <div className={styles.reportSession}>
            <div className={styles.item}>
              <div className={styles.label}>检查方法：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检查项目类型：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检查项目：</div>
              <div className={styles.value}>sfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检查结果：</div>
              <div className={styles.value}>sdfsdf</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>检查定量结果：</div>
              <div className={styles.value}>sdfsd</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>结果计量单位：</div>
              <div className={styles.value} >sss</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>结果客观所见：</div>
              <div className={styles.value} >sss</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>结果主观提示：</div>
              <div className={styles.value} >sss</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>报告医生：</div>
              <div className={styles.value} >sss</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>审核医生：</div>
              <div className={styles.value} >sss</div>
            </div>
          </div>
        </TabPane>
      </Tabs>
      <Modal
        visible={isModalVisible}
        width='80%'
        centered={true}
        footer={[]}
        onCancel={() => { setIsModalVisible(false) }}
        onOk={() => { setIsModalVisible(false) }}>
        {reportState === 0 ? <TestReportCom currentReport={currentReport} infoList1={infoList1} infoList2={infoList2} columns={columns} data={data} /> :
          <div>
            <div className={styles.hospital}>{currentReport ? currentReport.hospDistrictName : ""}</div>
            <div className={styles.project}>{currentReport ? currentReport.projectName : ""}报告单</div>
            <CheckTable />
          </div>
        }
      </Modal>

    </div>
  )
}

export default reportView